<template>
  <div class="home-container">
    <!-- 导航内容区域 -->
    <div class="content">
      <div v-if="active === 'home'"><HomePage /></div>
      <div v-else-if="active === 'message'">消息内容</div>
      <div v-else-if="active === 'cart'"><ShoppingCartPage /></div>
      <div v-else-if="active === 'user'"><MinePage v-bind="userInfo" /></div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" active-color="#f02c00" inactive-color="#999" class="custom-tabbar">
      <van-tabbar-item name="home" icon="wap-home-o">主页</van-tabbar-item>
      <van-tabbar-item name="message" icon="comment-o">消息</van-tabbar-item>
      <van-tabbar-item name="cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import type { UserInfo } from '@/models/main'
import HomePage from '@/components/home/index.vue'
import ShoppingCartPage from '@/components/shoppingcart/index.vue'
import MinePage from '@/components/mine/index.vue'

// 当前激活的 tab
const active = ref('home')

// 在使用前先获取 storedUserInfo
const storedUserInfo = localStorage.getItem('userInfo')

// 初始化 userInfo
let userInfo: UserInfo

try {
  userInfo = reactive<UserInfo>(
    storedUserInfo && storedUserInfo !== '[object Object]'
      ? (JSON.parse(storedUserInfo) as UserInfo)
      : {
          userId: '',
          nickName: '',
          email: '',
          phone: '',
          token: '',
          password: '',
          sex: '',
          areaName: '',
          areaCode: '',
          birthday: ''
        }
  )
} catch (error) {
  console.error('Failed to parse userInfo from localStorage:', error)
  userInfo = reactive<UserInfo>({
    userId: '',
    nickName: '',
    email: '',
    phone: '',
    token: '',
    password: '',
    sex: '',
    areaName: '',
    areaCode: '',
    birthday: ''
  })
}

// 初始化
onMounted(() => {
  // 可以在这里做一些初始化逻辑
})
</script>

<style scoped>
.home-container {
  height: 90vh;
  display: flex;
  /* color: #f5f5f5; */
  flex-direction: column;
}

/* 拼多多红主题色 */
.custom-tabbar {
  background: #fff !important;
}

.custom-tabbar :deep(.van-tabbar-item--active) {
  background: transparent;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.custom-tabbar :deep(.van-tabbar-item--active .van-tabbar-item__icon),
.custom-tabbar :deep(.van-tabbar-item--active .van-tabbar-item__text) {
  color: #f02c00 !important;
}

.custom-tabbar :deep(.van-tabbar-item--active .van-tabbar-item__icon) {
  font-weight: bold;
}
</style>